<template>
	<view class="container">
		<view class="header" @click="test">

		</view>
		<view style="height: 200rpx;width: 100%;"></view>
		<view class="ku">
			<view class="item" v-for="(item,index) in videoInfoList">
				<view class="item-header">
					<view class="title">
						{{item.videoCategory}}+{{item.videoDay}}
					</view>
					<view class="classify">
						{{item.videoCategory}}
					</view>
				</view>
				<view class="gongchengid">
					(工程ID:{{item.id}})
				</view>
				<view class="tip">
					已上传视频素材数：4个 最多可生成视频数：32个
				</view>
				<view class="time">
					<view style="font-size: 28rpx;">
						<image src="../../static/images" style="height: 20rpx;width:20rpx"></image>
						<text>{{item.videoTime}}</text>
					</view>
					<view>
						距离过期仅剩89天
					</view>
				</view>

				<view class="footer">
					<view class="footer-left">
						<view class="xiugai">
							修改
						</view>
						<view class="xiugai">
							数据统计
						</view>
						<view class="seevideo" @click="lookVideo(item)">
							查看视频
						</view>
						<view class="douyin">
							DY发布
						</view>
						<view class="douyin">
							XHS发布
						</view>
					</view>
					<image src="../../static/images/delete.png" style="height: 46rpx;width:46rpx;"
						@click="deleteVideo(item.id)"></image>
				</view>
			</view>
		</view>


	</view>

</template>

<script>
	import Http from "@/utils/http"
	const http = new Http()
	export default {
		data() {
			return {
				videoInfoList: [],
				shopId: '',
			}
		},
		onShow() {
			this.getInfo();
		},
		//2.配置分享到朋友圈
		onShareTimeline() {
			return {
				title: '模剪，傻瓜式制作有流量的短视频', //分享的标题
				query: '/pages/index/index', //点击分享链接之后进入的页面路径
				imageUrl: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/28/1711607371526eab2a6157c4d4f22b17e09b737128967.png' //分享发送的链接图片地址
			}
		},
		mounted() {
			this.shopId = app.globalData.shopId
		},
		methods: {
			//删除视频
			deleteVideo(id) {
				http.get('v1/jiaoben/delete/' + id).then(res => {
					if (res.code == 200) {
						this.getInfo();
					}
				})
			},
			//查看视频详情
			lookVideo(item) {
				uni.navigateTo({
					url: '/subpkg/mkvideo/myJianjiKu?id=' + item.id
				})
			},
			//获取生成视频信息
			getInfo() {
				let obj = {
					shopId: this.shopId
				}
				http.post('v1/jiaoben/Joblist', obj).then(res => {
					this.videoInfoList = res.data.data;
					this.videoInfoList = this.videoInfoList.reverse();
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #fff;
	}

	.header {
		background-image: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/21/1710990508921b0a0ab8061f342a98f88cb730329b8e3.jpg');
		height: 200rpx;
		width: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		top: 0;
	}

	.ku {

		.item {
			margin: 30rpx 20rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;

			.item-header {
				display: flex;
				justify-content: space-between;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.classify {
					font-size: 28rpx;
					color: #d4237a;
				}
			}

			.gongchengid {
				font-size: 28rpx;
				color: #666;
				margin: 16rpx 0;
			}

			.tip {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 10rpx;
			}

			.time {
				display: flex;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;
				color: #666;
				font-size: 28rpx;
			}
		}


	}

	.footer {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		align-items: center;

		.footer-left {
			display: flex;
			font-size: 28rpx;
			margin-top: 10rpx;

			.xiugai {
				padding: 4rpx 10rpx;
				border: 1rpx solid #666;
				color: #333;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}

			.seevideo {
				padding: 4rpx 10rpx;
				border: 1rpx solid orange;
				color: orange;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}

			.douyin {
				padding: 4rpx 10rpx;
				border: 1rpx solid orange;
				color: #fff;
				background: orange;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>